<template>
  <div class="scoped-test">
    <h2>scoped测试</h2>
    <p><strong>官网文档上说明:</strong></p>
    <p>使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped css 和子组件的 scoped css 的影响。</p>
    <div class="root">
      <span>父组件</span>
    </div>
    <Bchild></Bchild>
    <p><strong>测试结果:</strong></p>
    <p>此处子组件不管加不加scoped，都会被父组件样式渗透，需要父组件加scoped隔离。</p>
    <p>但父组件scoped后标记（data-v-id）也会绑定到子组件的根节点上，所以假如子组件根节点有和父组件一样的css，还是会被父覆盖，最好给子组件再加一层div。</p>
    <p><strong>总结:</strong></p>
    <p>scoped是父组件用的，为了防止父渗透子；子组件用没用，不能防止子不被父渗透。</p>
    <p>有需要的话，子组件可以加一层div，来避免根节点被打上父级scoped后的标记。</p>
    <h2>>>>或:deep()的用法</h2>
    <p>父组件使用scoped后如何修改子组件的样式（一般是修改第三方组件的样式）</p>
    <p>由上scoped的原理得知，需要穿透的是自身的scoped，跟子组件是否scpoed无关。</p>
    <p><strong>方法1:</strong></p>
    <p>原生的用法：外层 >>> 子组件 {}</p>
    <p>sass或less：:deep(.abc) {}</p>
    <p><strong>方法2:</strong></p>
    <p>父组件里再写一个不带scoped的style，如此就可以随意修改子组件样式</p>
    <p>这种方法需要注意style的权重，假如子加了scoped，子级.abc[data-v-59347e64]的权重会比父级.abc要大。这时父级再套一层.scoped-test .abc增大权重，就能改子元素样式。</p>
    <p><strong>总结:</strong></p>
    <p>>>>或deep是为了穿透自身的scoped，与子级是否scoped无关。</p>
    <h2>line-height</h2>
    <div class="f-lh">
      <div class="c-lh">测试文字行高</div>
      <div class="c-lh2">我是第二行文字</div>
      <div class="c-lh3">我是第三行文字</div>
    </div>
    <p>line-height写了具体数值，比如 30px就是30px的高度。子元素 line-height 继承父元素的行高。</p>
    <p>line-height写了比例，比如 1.5 或 2，就是font-size * 比例的高度，font-size可以包括继承自父级的尺寸。默认font-size=16px。</p>
  </div>
</template>

<script>
  import Bchild from './comp/child.vue';
  export default {
    name: 'scopedtest',
    components: {
      Bchild
    }
  };
</script>

<style lang="scss" scoped>
  .scoped-test {
    .root {
      width: 80px;
      height: 80px;
      color: #ff0000;
      padding: 10px;
      background: #096;
    }
    // :deep(.abc) {
    //   background-color: aquamarine;
    // }
    // .abc {
    //   background-color: aquamarine;
    // }

    .f-lh {
      width: 200px;
      height: 100px;
      background: #09f;
      line-height: 30px;
      font-size: 20px;
      .c-lh2 {
        line-height: 20px;
      }
      .c-lh3 {
        font-size: 14px;
        line-height: 2;
      }
    }
  }
</style>

<!-- 
<style lang="scss">
  .scoped-test {
    .abc {
      background-color: aquamarine;
    }
  }
</style>
-->

